<template>
  <div v-if="model === true" class="status flex pass">
    <div :size="style.iconSize" class="animate__bounceIn mr-[6px] v-center">
      <IconCircleCheckFilled
        color="#02943D"
        :size="style.iconSize"
      ></IconCircleCheckFilled>
    </div>
    {{ trueText }}
    <slot />
  </div>
  <div v-else-if="model === false" class="status flex unPass">
    <div :size="style.iconSize" class="animate__bounceIn mr-[6px] v-center">
      <IconCircleXFilled
        color="#dc2626"
        :size="style.iconSize"
      ></IconCircleXFilled>
    </div>
    {{ falseText }}
    <slot />
  </div>
</template>
<script setup>
import { reactive, toRefs, ref } from "vue";
import { IconCircleCheckFilled, IconCircleXFilled } from "@tabler/icons-vue";

const state = reactive({
  style: {
    iconSize: 18,
  },
  formData: {},
});
const { style, formData } = toRefs(state);

const model = defineModel();

const props = defineProps({
  /** true 显示的文本 */
  trueText: {
    type: String,
    required: true,
  },
  /** false 显示的文本 */
  falseText: {
    type: String,
    required: true,
  },
});
</script>
<style lang="scss">
.status {
  font-size: 12px;
  color: #333;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  padding: 0 10px;

  &.pass {
    background: #e9f8f1;
  }

  &.unPass {
    background: #fee2e2;
  }
}
</style>
